<template>
  <div class="video-page page-card">
    <h-query :showKey="['startTime,endTime']" :query="query" @search="search">
      <a-button slot="btn" type="primary" class="a-button-right" style="margin: 6px 0 0 12px" @click="showOrder = true">指令下发</a-button>
      <!-- <h-tooltip slot="btn" title="接口暂无" /> -->
    </h-query>
    <a-row>
      <a-col :span="7">
        <div class="scroll scroll-video">
          <div v-for="item in this.config.dataSource" :key="item.id">
            <h1>指令信息</h1>
            <p>{{ item.content }}</p>
            <div class="footer">
              <p>回复状态：{{ item.status == 1 ? '已完成' : '待接收' }}</p>
              <p>回复时间：{{ item.createTime }}</p>

              <a-button class="scroll-btn" type="primary" @click="showDetail(item)">查看详情</a-button>
            </div>
          </div>
        </div>
        <div class="hlist-pagination" style="">
          <a-pagination v-model="currentZl" :pageSize="4" :total="totalZl" @change="changeZl" />
        </div>
      </a-col>
      <a-col :span="16" :offset="1">
        <!-- <Search @search="search" /> -->
        <!-- <h-tooltip title="接口缺少筛选条件" /> -->

        <div class="video-header">视频信息</div>
        <div class="video-page-content">
          <a-spin :spinning="loading" size="large">
            <a-row class="n-row-5" :gutter="[40, 40]">
              <a-col :span="8" v-for="item in list" :key="item.id">
                <div class="video-page-card hover-shadow" @click="showVideo(item)">
                  <div class="video-page-img">
                    <img :src="item.videoImg" width="100%" alt="">
                  </div>
                  <div style="padding: 0 18px">
                    <div class="video-page-text">
                      <h1 class="ellipsis-2">{{ item.title || '无标题' }}</h1>
                      <!-- <p class="ellipsis-2">相关事件：相关事件怎么查</p> -->
                    </div>
                    <div class="video-footer">
                      <div class="video-page-footer">
                        <div class="video-page-hot">
                          <img :src="require('@/assets/Image/icon/hot.png')" width="100%" alt="">
                        </div>
                        <span>{{ item.hotNumber | hotFilter }}热度</span>
                        <span>{{ item.rease_time }}</span>
                      </div>
                      <p class="soure-p">来源：{{ item.source || '无' }}</p>
                      <a class="download" v-if="item.status == 0" @click.stop="download(item)">下载视频</a>
                    </div>
                  </div>
                </div>
              </a-col>
            </a-row>
          </a-spin>
          <div class="hlist-pagination" style="">
            <a-pagination v-model="current" :total="total" @change="change" />
          </div>
        </div>
      </a-col>
    </a-row>

    <a-modal v-model="show" title="视频" width="800px" :footer="null">
      <video :src="videoUrl" width="100%" :poster="poster" controls></video>
    </a-modal>

    <a-modal v-model="showModal" title="历史指令" width="800px" :footer="null">
      <!-- <a-space>
        <span>指令来源: </span>
        <a-radio-group buttonStyle="solid" v-model="source" @change="refresh">
          <a-radio-button value="0">热搜配置</a-radio-button>
          <a-radio-button value="1">账号配置</a-radio-button>
          <a-radio-button value="2">文章配置</a-radio-button>
          <a-radio-button value="3">视频截取</a-radio-button>
        </a-radio-group>
      </a-space>
      <br>
      <br> -->
      <h-table
        ref="htable"
        @init="getVideoinstruction"
        :config="config"
        :showHeadBgNone="false"
        :zebraStripes="false">
        <!-- <span slot="quality" slot-scope="{text, record}">
          <a-tag :color="quality[record.quality].color">{{ quality[record.quality].label }}</a-tag>
        </span> -->
      </h-table>
    </a-modal>

    <h-modal class="event-modal" hideFooter v-model="showDetailModal" title="详情" @submit="show=false">
      <div class="detail-title">
        <h1>{{ detail.instructions }}</h1>
      </div>
      <div class="detail-weightType">
        {{ detail.createTime }}
      </div>
      <div class="detail-weightType">
        <a-tag v-for="(item, i) in getComponey(detail.thirdId)" :key="i">
          {{ item }}
        </a-tag>
      </div>
      <div class="detail-content" v-html="detail.content">

      </div>

      <div class="dh-footer">
        <!-- <div><SvgIcon iconClass="location (1)" />地点：{{ detail.territory }}</div>
        <div><SvgIcon iconClass="time (1)" />时间：{{ detail.reaseTime }}</div> -->
      </div>
    </h-modal>

    <createLeaderMsg v-model="showOrder" action="video" showDept @submit="getVideoinstruction" />
  </div>
</template>
<script>
import SvgIcon from '@/components/SvgIcon.vue';
import { videoList, getVideoinstruction, getVideoById, getThirdName } from '@/api/serve';
import Search from '@/components/Search/Index';
import createLeaderMsg from '../../detail/createLeaderMsg';

export default {
  name: 'VideoPage',
  components: { SvgIcon, Search, createLeaderMsg },
  data() {
    return {
      currentZl: 1,
      totalZl: 0,
      show: false,
      showDetailModal: false,
      showOrder: false,
      list: [],
      checked: [],
      current: 1,
      loading: false,
      finished: false,
      showModal: false,
      total: 0,
      queryParams: {
        pageNo: 1,
        pageSize: 6
      },
      source: '0',
      videoUrl: '',
      poster: '',
      historyList: [],
      query: [
        {
          key: 'title',
          label: '关键词搜索',
          type: 'input'
        }
      ],
      config: {
        rowKey: 'id',
        bordered: true,
        size: 'small',
        dataSource: [],
        scorll: {
          y: 500
        },
        columns: [
          // {
          //   align: 'center',
          //   title: '序号',
          //   dataIndex: 'index',
          //   scopedSlots: { customRender: 'index' }
          // },
          {
            align: 'center',
            title: '指令内容',
            dataIndex: 'content',
            width: 300
          },
          {
            align: 'center',
            title: '第三方公司',
            dataIndex: 'thirdId'
          },
          {
            align: 'center',
            title: '创建时间',
            dataIndex: 'createTime'
          }
        ],
        pagination: {
          total: 0
        }
      },
      params: {
        pageNo: 1,
        pageSize: 4
      },
      detail: {},
      componey: []
    };
  },
  computed: {
    getComponey() {
      return function(value) {
        if (value) {
          const data = this.componey.filter(e => value.split(',').includes(e.id));
          return data.map(e => e.companyName);
        }
        return [];
      };
    }
  },
  mounted() {
    this.$nextTick(() => {
       if (document.querySelector('.scroll-video')) {
          const selectWrap = document.querySelector('.scroll-video');
          selectWrap.addEventListener('scroll', this.scrollLoadMore);
          console.log(selectWrap, 'selectWrap');
       }
    });
  },
  created() {
    this.getList();
    this.getVideoinstruction();
    this.getThirdName();
  },
  methods: {
    download({ videoUrl, title }) {
        const a = document.createElement('a');
      a.style.display = 'none';
      a.setAttribute('target', '_blank');
      /*
       * download的属性是HTML5新增的属性
       * href属性的地址必须是非跨域的地址，如果引用的是第三方的网站或者说是前后端分离的项目(调用后台的接口)，这时download就会不起作用。
       * 此时，如果是下载浏览器无法解析的文件，例如.exe,.xlsx..那么浏览器会自动下载，但是如果使用浏览器可以解析的文件，比如.txt,.png,.pdf....浏览器就会采取预览模式
       * 所以，对于.txt,.png,.pdf等的预览功能我们就可以直接不设置download属性(前提是后端响应头的Content-Type: application/octet-stream，如果为application/pdf浏览器则会判断文件为 pdf ，自动执行预览的策略)
       */
      title && a.setAttribute('download', title);
      a.href = videoUrl;
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);
    },
    scrollLoadMore() {
      // if (this.loading || this.finished) return;
      // const scrollWrap = document.querySelector('.scroll-video');
      // var currentScrollTop = scrollWrap.scrollTop;
      // var currentOffsetHeight = scrollWrap.scrollHeight;
      // var currentClientHeight = scrollWrap.clientHeight;
      // if ((currentScrollTop + currentClientHeight >= currentOffsetHeight - 80)) {
      //     // 到底部了 重新请求数据
      //     this.params.pageNo++; // 页码++
      //     this.getVideoinstruction();
      //  }
    },
    showVideo(item) {
      if (!item.videoUrl) return;
      window.open(item.videoUrl);
      // this.show = true;
      // this.video = item.videoUrl;
      // this.poster = item.videoImg;
    },
    // search(keyword) {
    //   this.queryParams.title = keyword;
    //   this.getList();
    // },
    search(params) {
      Object.assign(this.queryParams, { ...params, name: params.title });
      this.getList();
    },
    getList() {
      this.loading = true;
      videoList(this.queryParams).then(res => {
        this.list = res.data.records;
        this.loading = false;
        this.total = res.data.total;
      });
    },
    change(page) {
      this.queryParams.pageNo = page;
      this.getList();
    },
    changeZl(page) {
      this.params.pageNo = page;
      this.getVideoinstruction();
    },
    getVideoinstruction() {
      this.loading = true;
      getVideoinstruction({ ...this.params, source: 3 }).then(res => {
        this.config.dataSource = res.data.records;
        this.config.pagination.total = res.data.total;
        this.totalZl = res.data.total;
        this.loading = false;
        // if (this.config.dataSource.length >= this.config.pagination.total) {
        //   this.finished = true;
        // }
      });
    },
    refresh() {
      this.$refs.htable.refresh(true);
    },
    showDetail({ id }) {
      getVideoById({ id }).then(res => {
        this.detail = res.data || {};
        this.showDetailModal = true;
      });
    },
    getThirdName() {
      getThirdName().then(res => {
        this.componey = res.data;
      });
    }
  }
};
</script>
<style lang="less" scoped>
.video-page-content {
  margin-top: 20px;
  margin-left: -20px;
  width: calc(100% + 40px);
}
.video-page-card {
  height: 375px;
  background: #FFFFFF;
  box-shadow: 0px 0px 20px 0px rgba(20,15,41,0.1000);
  border-radius: 10px;
  // padding: 28px 28px;
  padding-bottom: 16px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  box-sizing: border-box;
  .video-page-text {
    // flex: 1;
    // margin-right: 12px;
    // padding: 0 18px;
    margin-top: 12px;
    h1 {
      font-size: 18px;
      font-weight: bold;
      color: #333;
      line-height: 1.5;
    }
    p {
      font-size: 15px;
      margin-bottom: 8px;
      height: 46px;
    }
  }
  .video-page-img {
    width: 100%;
    height: 170px;
    overflow: hidden;
    background: #ddd;
    border: 0 solid #000;
    img {
      display: block;
      height: 100%;
      object-fit: cover;
    }
  }

  .video-footer {
    position: absolute;
    bottom: 0;
    width: 90%;
  }

  .video-page-footer {
    // position: absolute;
    // bottom: 20px;
    // padding: 0 18px;
    display: flex;
    align-items: center;
    position: relative;
    width: 100%;
    // margin-top: 24px;
    // width: 94%;
    .video-page-hot {
      width: 20px;
      margin-right: 10px;
    }
    >span:nth-child(2) {
      font-size: 16px;
      font-weight: 400;
      color: #FF0101;
      line-height: 36px;
      margin-right: 33px;
    }
    >span:nth-child(3) {
      font-size: 16px;
      font-weight: 400;
      color: #999;
      line-height: 36px;
    }
    .video-page-checkbox {
      width: 29px;
      height: 29px;
      border-radius: 100%;
      border: 1px solid #1F3B8A;
      position: absolute;
      right: 10px;
      bottom: 0;
      cursor: pointer;
      overflow: hidden;
      .video-page-checkbox--checked {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        background: #1F3B8A;
        color: #fff;
        font-size: 22px;
        line-height: 29px;
        text-align: center;
      }
    }
  }
  .soure-p {
    margin-top: 8px;
    color: #999;
  }
  .download{
    position: absolute;
    right: 0;
    bottom: 40px;
  }
}
.hlist-pagination {
  width: 100%;
  text-align: center;
  margin-top: 40px;
  margin-bottom: -10px;
}

.page-card {
  position: relative;
}
.a-button-right {
  // right: 40px;
  // top: 60px;
}
.video-header {
  height: 40px;
  background: #EBEEF6;
  border-radius: 20px;
  font-size: 18px;
  font-weight: 500;
  color: #1F3B8A;
  line-height: 40px;
  text-align: center;
}

.scroll {
  height: 855px;
  // overflow-y: auto;
  // overflow-x: visible;
  padding: 0 12px;
  margin-top: -17px;
  >div {
    height: 173px;
    background: #FFFFFF;
    box-shadow: 0px 0px 17px 0px rgba(20,15,41,0.1);
    border-radius: 8px;
    padding: 18px 16px;
    box-sizing: border-box;
    margin-bottom: 30px;
    position: relative;
    &:first-child {
      margin-top: 17px;
    }
    > h1 {
      font-size: 17px;
      font-weight: 500;
      color: #333333;
      line-height: 18px;
      margin: 0;
      margin-bottom: 12px;
    }
    > p {
      font-size: 13px;
      font-weight: 400;
      color: #999999;
      margin: 0;
      line-height: 1.4;
    }
    .footer {
      margin-top: 20px;
      position: relative;
      p {
        font-size: 13px;
        font-weight: 400;
        color: #333333;
        line-height: 1.4;
        margin-bottom: 6px;
      }
    }
    .scroll-btn {
      position: absolute;
      right: 0;
      bottom: 0;
    }
  }
}

.detail-title {
    display: flex;
    justify-content: center;
    align-items: center;
    // margin-top: -20px;
    .detail-tag {
      width: 57px;
      height: 26px;
      border: 1px solid #1FAF7A;
      border-radius: 5px;
      font-size: 16px;
      font-weight: 400;
      color: #1FAF7A;
      text-align: center;
      line-height: 25px;
      margin-right: 13px;
      transform: translate(0, 1px);
    }
    h1 {
      font-size: 24px;
      font-weight: 500;
      color: #333333;
      margin: 0;
      line-height: 1.1;
      max-width: 70%;
    }
  }
  .detail-tags {
    font-size: 16px;
    font-weight: 400;
    color: #0478FE;
    margin: 0 auto;
    text-align: center;
    margin-top: 18px;
    .ant-divider {
      background: #0478FE;
    }
  }
  .detail-weightType {
    font-size: 16px;
    font-weight: 400;
    color: #0478FE;
    margin-left: 12px;
    line-height: 1;
    text-align: center;
    margin-top: 22px;
  }
  .detail-content {
    margin-top: 40px;
    color: #333;
    font-size: 16px;
    line-height: 2;
    >p {

    }
    img {
      max-width: 100%;
    }
  }
  .dh-footer {
    position: absolute;
    bottom: 36px;
    font-size: 16px;
    display: flex;
    width: 94%;
    justify-content: space-between;
    svg {
      margin-right: 8px;
    }
    >div:last-child {
      text-align: right;
    }
  }

</style>
<style lang="less">

</style>
